import { useState, useEffect } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Image } from 'antd-mobile'
import { LeftOutline, RightOutline, InformationCircleOutline } from 'antd-mobile-icons'
import dataService, { type Training } from '../../services/dataService'
import SchedulePopup from '../../components/training/SchedulePopup'
import ActionDetailPopup from '../../components/training/ActionDetailPopup'

const TrainingDetail = () => {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const trainingId = searchParams.get('id')
  
  const [training, setTraining] = useState<Training | null>(null)
  const [loading, setLoading] = useState(true)
  const [showSchedulePopup, setShowSchedulePopup] = useState(false)
  const [showActionPopup, setShowActionPopup] = useState(false)
  const [selectedAction, setSelectedAction] = useState<{
    name: string;
    duration: string;
    image: string;
  } | null>(null)
  // 移除多视图状态，改为单一滚动页面

  useEffect(() => {
    if (!trainingId) {
      setLoading(false)
      return
    }

    const trainingData = dataService.getTrainingById(parseInt(trainingId))
    if (trainingData) {
      setTraining(trainingData)
    }
    setLoading(false)
  }, [trainingId])

  const startTraining = () => {
    if (training) {
      navigate(`/training-session?id=${training.id}`)
    }
  }

  const handleScheduleTraining = () => {
    setShowSchedulePopup(true)
  }

  const handleActionCardClick = (name: string, duration: string, image: string) => {
    setSelectedAction({ name, duration, image })
    setShowActionPopup(true)
  }

  const closeActionPopup = () => {
    setShowActionPopup(false)
    setSelectedAction(null)
  }

  // 移除视图切换函数

  if (loading || !training) {
    return (
      <div className="training-detail-page">
        <div className="loading">加载中...</div>
      </div>
    )
  }

  return (
    <>
      <div className="training-detail-page">
        {/* 固定返回按钮 */}
        <div className="fixed-header">
          <button className="back-btn" onClick={() => navigate(-1)}>
            <LeftOutline />
          </button>
        </div>

        {/* 主要内容区域 - 可滚动（包含图片） */}
        <div className="main-content">
          {/* 顶部训练配图 */}
          <div className="hero-image">
            <Image
              src="/拉伸训练.png"
              alt="塑性训练"
              width="100%"
              height={280}
              fit="cover"
            />
          </div>

          {/* 内容区域包装 */}
          <div className="content-area">
            {/* 标题和说明 */}
            <div className="title-section">
            <h1 className="training-title">塑性训练</h1>
            <p className="training-description">
              阻力训练和力量训练对于塑造身形至关重要，特别是针对上半身肌肉群的强化。
              通过科学的训练方法，能够有效提升肌肉力量，改善身体线条。
            </p>
          </div>

          {/* 训练信息圆形按钮 */}
          <div className="info-buttons">
            <div className="info-button">
              <div className="info-value">30</div>
              <div className="info-label">分钟</div>
            </div>
            <div className="info-button">
              <div className="info-value">340</div>
              <div className="info-label">Kal</div>
            </div>
            <div className="info-button">
              <div className="info-value">初学者</div>
              <div className="info-label">难度</div>
            </div>
          </div>

          {/* 器械板块 */}
        <div className="equipment-section">
            <div className="section-header">
              <h3 className="section-title">器械</h3>
            <span className="equipment-count">2 项</span>
        </div>
          <div className="equipment-grid">
            <div className="equipment-item">
              <div className="equipment-image">
                <Image
                    src="/哑铃.png"
                    alt="哑铃"
                  width={60}
                  height={60}
                  fit="cover"
                />
              </div>
                <span className="equipment-name">2 个哑铃</span>
          </div>
            <div className="equipment-item">
              <div className="equipment-image">
                <Image
                  src="/瑜伽垫.png"
                  alt="瑜伽垫"
                  width={60}
                  height={60}
                  fit="cover"
                />
            </div>
              <span className="equipment-name">瑜伽垫</span>
            </div>
          </div>
        </div>

          {/* 功能按钮 */}
          <div className="action-buttons">
            <button className="action-btn" onClick={handleScheduleTraining}>
              <span>预定训练</span>
              <RightOutline />
            </button>
            <button className="action-btn">
              <span>继续训练</span>
              <RightOutline />
          </button>
        </div>

          {/* 热身运动板块 */}
          <div className="training-section">
            <div className="section-header">
              <h3 className="section-title">热身运动</h3>
              <span className="training-meta">2 训练 • 2 分钟</span>
            </div>
            <div className="training-list">
              <div className="training-item" onClick={() => handleActionCardClick('紧致背部', '0:30', '/紧致背部.png')}>
                <div className="training-image">
                  <Image
                    src="/紧致背部.png"
                    alt="紧致背部"
                    width={50}
                    height={50}
                    fit="cover"
                  />
                </div>
                <div className="training-info">
                  <div className="training-name">紧致背部</div>
                  <div className="training-duration">0:30</div>
                </div>
                <button className="info-btn" onClick={(e) => { e.stopPropagation(); handleActionCardClick('紧致背部', '0:30', '/紧致背部.png'); }}>
                  <InformationCircleOutline />
                </button>
              </div>
              <div className="training-item" onClick={() => handleActionCardClick('平板支撑', '0:30', '/平板支撑.png')}>
                <div className="training-image">
                  <Image
                    src="/平板支撑.png"
                    alt="平板支撑"
                    width={50}
                    height={50}
                    fit="cover"
                  />
                </div>
                <div className="training-info">
                  <div className="training-name">平板支撑</div>
                  <div className="training-duration">0:30</div>
                </div>
                <button className="info-btn" onClick={(e) => { e.stopPropagation(); handleActionCardClick('平板支撑', '0:30', '/平板支撑.png'); }}>
                  <InformationCircleOutline />
                </button>
              </div>
              <div className="rest-item">
                <div className="rest-icon">休息</div>
                <div className="rest-info">
                  <div className="rest-name">休息</div>
                  <div className="rest-duration">0:30</div>
                </div>
              </div>
            </div>
          </div>

          {/* 训练板块 */}
          <div className="training-section">
            <div className="section-header">
              <h3 className="section-title">训练</h3>
              <span className="training-meta">3 训练 • 2 分钟</span>
            </div>
            <div className="training-list">
              <div className="training-item" onClick={() => handleActionCardClick('四头肌腿部训练', '× 20', '/四头肌腿部训练.png')}>
                <div className="training-image">
                  <Image
                    src="/四头肌腿部训练.png"
                    alt="四头肌腿部训练"
                    width={50}
                    height={50}
                    fit="cover"
                  />
                </div>
                <div className="training-info">
                  <div className="training-name">四头肌腿部训练</div>
                  <div className="training-duration">× 20</div>
                </div>
                <button className="info-btn" onClick={(e) => { e.stopPropagation(); handleActionCardClick('四头肌腿部训练', '× 20', '/四头肌腿部训练.png'); }}>
                  <InformationCircleOutline />
                </button>
              </div>
              <div className="training-item" onClick={() => handleActionCardClick('箭步蹲跳', '× 20', '/箭步蹲跳.png')}>
                <div className="training-image">
                  <Image
                    src="/箭步蹲跳.png"
                    alt="箭步蹲跳"
                    width={50}
                    height={50}
                    fit="cover"
                  />
                </div>
                <div className="training-info">
                  <div className="training-name">箭步蹲跳</div>
                  <div className="training-duration">× 20</div>
                </div>
                <button className="info-btn" onClick={(e) => { e.stopPropagation(); handleActionCardClick('箭步蹲跳', '× 20', '/箭步蹲跳.png'); }}>
                  <InformationCircleOutline />
                </button>
              </div>
              <div className="training-item" onClick={() => handleActionCardClick('深蹲跳跃', '× 20', '/深蹲跳跃.png')}>
                <div className="training-image">
                  <Image
                    src="/深蹲跳跃.png"
                    alt="深蹲跳跃"
                    width={50}
                    height={50}
                    fit="cover"
                  />
                </div>
                <div className="training-info">
                  <div className="training-name">深蹲跳跃</div>
                  <div className="training-duration">× 20</div>
                </div>
                <button className="info-btn" onClick={(e) => { e.stopPropagation(); handleActionCardClick('深蹲跳跃', '× 20', '/深蹲跳跃.png'); }}>
                  <InformationCircleOutline />
                </button>
              </div>
              <div className="rest-item">
                <div className="rest-icon">休息</div>
                <div className="rest-info">
                  <div className="rest-name">休息</div>
                  <div className="rest-duration">0:30</div>
                </div>
              </div>
            </div>
        </div>

          {/* 拉伸板块 */}
          <div className="training-section">
            <div className="section-header">
              <h3 className="section-title">拉伸</h3>
              <span className="training-meta">2 训练 • 2 分钟</span>
            </div>
            <div className="training-list">
              <div className="training-item" onClick={() => handleActionCardClick('跪姿股四头肌拉伸', '× 20', '/跪姿股四头肌拉伸.png')}>
                <div className="training-image">
                  <Image
                    src="/跪姿股四头肌拉伸.png"
                    alt="跪姿股四头肌拉伸"
                    width={50}
                    height={50}
                    fit="cover"
                  />
                </div>
                <div className="training-info">
                  <div className="training-name">跪姿股四头肌拉伸</div>
                  <div className="training-duration">× 20</div>
                </div>
                <button className="info-btn" onClick={(e) => { e.stopPropagation(); handleActionCardClick('跪姿股四头肌拉伸', '× 20', '/跪姿股四头肌拉伸.png'); }}>
                  <InformationCircleOutline />
                </button>
              </div>
              <div className="training-item" onClick={() => handleActionCardClick('体侧屈腔斜肌拉伸', '× 20', '/体侧屈腔斜肌拉伸.png')}>
                <div className="training-image">
                  <Image
                    src="/体侧屈腔斜肌拉伸.png"
                    alt="体侧屈腔斜肌拉伸"
                    width={50}
                    height={50}
                    fit="cover"
                  />
                </div>
                <div className="training-info">
                  <div className="training-name">体侧屈腔斜肌拉伸</div>
                  <div className="training-duration">× 20</div>
                </div>
                <button className="info-btn" onClick={(e) => { e.stopPropagation(); handleActionCardClick('体侧屈腔斜肌拉伸', '× 20', '/体侧屈腔斜肌拉伸.png'); }}>
                  <InformationCircleOutline />
                </button>
              </div>
              <div className="rest-item">
                <div className="rest-icon">休息</div>
                <div className="rest-info">
                  <div className="rest-name">休息</div>
                  <div className="rest-duration">0:30</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        </div>

        {/* 固定在底部的开始训练按钮 */}
        <div className="fixed-bottom-action">
          <button className="start-training-btn" onClick={startTraining}>
            开始训练
          </button>
        </div>
      </div>


      {/* 预定训练弹窗 */}
      <SchedulePopup
        visible={showSchedulePopup}
        onClose={() => setShowSchedulePopup(false)}
        training={training}
      />

      {/* 动作详情弹窗 */}
      <ActionDetailPopup
        visible={showActionPopup}
        onClose={closeActionPopup}
        actionName={selectedAction?.name}
        actionImage={selectedAction?.image}
      />

      <style>{`
        .training-detail-page {
          min-height: 100vh;
          background: #f8f9fa;
          position: relative;
        }

        /* 固定头部返回按钮 */
        .fixed-header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 60px;
          background: transparent;
          z-index: 1001;
          display: flex;
          align-items: center;
          padding: 0 16px;
        }

        .fixed-header .back-btn {
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.9);
          border: none;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
        }

        .fixed-header .back-btn:hover {
          background: #ffffff;
          transform: scale(1.05);
        }

        .fixed-header .back-btn svg {
          color: #333333;
          font-size: 20px;
        }
        
        /* 英雄区域 - 顶部训练配图 */
        .hero-section {
          width: 100%;
          height: 280px;
          position: relative;
          overflow: hidden;
        }
        
        .hero-section .back-btn {
          position: absolute;
          top: 44px;
          left: 16px;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.9);
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 18px;
          color: #333333;
          z-index: 10;
          transition: all 0.3s ease;
        }
        
        .hero-section .back-btn:hover {
          background: rgba(255, 255, 255, 1);
          transform: scale(1.05);
        }
        
        /* 导航头部 */
        .nav-header {
          background: #ffffff;
          padding: 44px 16px 16px;
          display: flex;
          align-items: center;
          gap: 16px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        
        .nav-header .back-btn {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: #f8f9fa;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 18px;
          color: #333333;
          transition: all 0.3s ease;
        }
        
        .page-title {
          font-size: 20px;
          font-weight: 700;
          color: #333333;
          margin: 0;
        }
        
        /* 主要内容区域 - 统一的纵向滚动（包含图片） */
        .main-content {
          height: calc(100vh - 100px);
          overflow-y: auto;
          padding-top: 60px;
          padding-bottom: 100px;
        }

        /* 滚动区域内的图片 */
        .hero-image {
          position: relative;
          height: 280px;
          overflow: hidden;
        }

        /* 内容区域 */
        .content-area {
          background: #ffffff;
          border-radius: 20px 20px 0 0;
          margin-top: -20px;
          position: relative;
          z-index: 2;
          padding: 24px 16px 32px;
        }
        
        /* 自定义滚动条 */
        .main-content::-webkit-scrollbar {
          width: 6px;
        }
        
        .main-content::-webkit-scrollbar-track {
          background: #f8f9fa;
          border-radius: 3px;
        }
        
        .main-content::-webkit-scrollbar-thumb {
          background: #FF6B35;
          border-radius: 3px;
        }
        
        .main-content::-webkit-scrollbar-thumb:hover {
          background: #E55A2B;
        }
        
        /* 标题区域 */
        .title-section {
          text-align: center;
          margin-bottom: 32px;
        }
        
        .training-title {
          font-size: 28px;
          font-weight: 700;
          color: #333333;
          margin: 0 0 16px 0;
          letter-spacing: -0.5px;
        }
        
        .training-description {
          font-size: 16px;
          line-height: 1.6;
          color: #666666;
          margin: 0;
          text-align: justify;
          padding: 0 8px;
        }
        
        /* 信息圆形按钮 */
        .info-buttons {
          display: flex;
          justify-content: space-around;
          margin-bottom: 32px;
          padding: 0 20px;
        }
        
        .info-button {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: #ffffff;
          border: 2px solid #f0f0f0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .info-value {
          font-size: 16px;
          font-weight: 700;
          color: #333333;
          margin-bottom: 4px;
        }
        
        .info-label {
          font-size: 12px;
          color: #999999;
          font-weight: 500;
        }
        
        /* 章节标题 */
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
        }
        
        .section-title {
          font-size: 18px;
          font-weight: 700;
          color: #333333;
          margin: 0;
        }
        
        /* 器械区域 */
        .equipment-section {
          margin-bottom: 32px;
        }
        
        .equipment-count {
          font-size: 14px;
          color: #999999;
          font-weight: 500;
        }
        
        .equipment-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
        }
        
        .equipment-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 12px;
          padding: 20px;
          background: #f8f9fa;
          border-radius: 16px;
          transition: all 0.3s ease;
        }
        
        .equipment-item:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }
        
        .equipment-image {
          width: 80px;
          height: 80px;
          border-radius: 16px;
          overflow: hidden;
          background: linear-gradient(135deg, #FFB6C1 0%, #FFC0CB 50%, #FFCCCB 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2px 8px rgba(255, 182, 193, 0.3);
        }
        
        .equipment-name {
          font-size: 14px;
          color: #333333;
          font-weight: 600;
        }
        
        /* 功能按钮 */
        .action-buttons {
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin-bottom: 32px;
        }
        
        .action-btn {
          width: 100%;
          height: 52px;
          background: #ffffff;
          border: 2px solid #e0e0e0;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 16px;
          font-weight: 600;
          color: #333333;
        }
        
        .action-btn:hover {
          border-color: #FF6B35;
          background: rgba(255, 107, 53, 0.05);
          transform: translateY(-1px);
        }
        
        .action-btn:active {
          transform: scale(0.98);
        }
        
        /* 训练区域 */
        .training-section {
          margin-bottom: 32px;
        }
        
        .training-meta {
          font-size: 14px;
          color: #999999;
          font-weight: 500;
        }
        
        .training-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        
        .training-item {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px;
          background: #ffffff;
          border-radius: 16px;
          border: 1px solid #f0f0f0;
          transition: all 0.3s ease;
          cursor: pointer;
        }
        
        .training-item:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 16px rgba(0,0,0,0.08);
          border-color: rgba(255, 107, 53, 0.2);
        }

        .training-item:active {
          transform: translateY(0);
          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        
        .training-image {
          width: 50px;
          height: 50px;
          border-radius: 12px;
          overflow: hidden;
          flex-shrink: 0;
        }
        
        .training-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
        
        .training-name {
          font-size: 15px;
          font-weight: 600;
          color: #333333;
        }
        
        .training-duration {
          font-size: 13px;
          color: #999999;
          font-weight: 500;
        }
        
        .info-btn {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: #f8f9fa;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666666;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .info-btn:hover {
          background: #e9ecef;
          color: #FF6B35;
          transform: scale(1.05);
        }
        
        /* 休息项 */
        .rest-item {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px;
          background: rgba(255, 107, 53, 0.05);
          border-radius: 16px;
          border: 1px solid rgba(255, 107, 53, 0.2);
        }
        
        .rest-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #FF6B35;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 600;
          flex-shrink: 0;
        }
        
        .rest-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
        
        .rest-name {
          font-size: 15px;
          font-weight: 600;
          color: #333333;
        }
        
        .rest-duration {
          font-size: 13px;
          color: #999999;
          font-weight: 500;
        }
        
        /* 固定底部操作区域 */
        .fixed-bottom-action {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          background: #ffffff;
          padding: 16px 16px 32px;
          border-top: 1px solid #f0f0f0;
          z-index: 1000;
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        }
        
        /* 开始训练按钮 */
        .start-training-btn {
          width: 100%;
          height: 56px;
          background: #FF6B35;
          border: none;
          border-radius: 28px;
          color: #ffffff;
          font-size: 18px;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
        }
        
        .start-training-btn:hover {
          background: #E55A2B;
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
        }
        
        .start-training-btn:active {
          transform: scale(0.98);
        }
        
        /* 加载状态 */
        .loading {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100vh;
          font-size: 16px;
          color: #666666;
          background: #ffffff;
        }
        
        /* 响应式设计 */
        @media (max-width: 375px) {
          .hero-section {
            height: 240px;
          }
          
          .training-title {
            font-size: 24px;
          }
          
          .info-buttons {
            padding: 0 10px;
          }
          
          .info-button {
            width: 70px;
            height: 70px;
          }
        }
      `}</style>
    </>
  )
}

export default TrainingDetail
